<template lang="">
    <div>
           <!-- 搭建基本的布局 -->
       <el-container>
         <el-header >
            <div class="qwe">djggdawd</div>
            <div class="header">xxxx大型后台管理系统</div>
             <div class="span">
            <span >欢迎vvvvIp金主==>{{$store.getters.getUser.username}}</span>
            <el-button type="danger" @click="logout">退出</el-button>
         </div>
         </el-header>
        
        <el-container>
         <el-aside width="240px">
            <v-nav></v-nav>
         </el-aside>
      <el-main>
           <!-- 二级路由出口 -->
            <router-view></router-view>
        </el-main>
     </el-container>  
   </el-container>
    </div>
</template>


<script>
// 引入封装好的组件
import vNav from "../components/vNav.vue";
export default {
   data() {
      return {

      }
   },
   components: {
      vNav,
   },
   methods: {
      logout() {
         // 触发行动并退出跳转登录
       this.$store.dispatch('changeUserAction',false)
      this.$router.push('/login')
      }
   },
};
</script>

<style lang="less" scoped>
.el-header {
   text-align: center;
   background-color: aqua;
}

.el-menu {
   min-height: 600px;
}
.el-header {
   display: flex;
   justify-content: space-between;
   align-content: center;
   .qwe{
      visibility: hidden;
   }
}
.span{
    padding-top: 10px;
}

.header {
   padding-top: 20px;
   color: white;
}
</style>